<template>
    <view class="page">
        <view class="rule" @click="open">
            <text>活动规则</text>
        </view>
        <u-popup :show="rule" mode="center" bgColor="transparent" overlayOpacity="0.8" @close="close">
            <view>
                <view style="width: 70%; height: 50vh; overflow: scroll; margin: 0% auto;background-color: #f1f1f1; padding: 30rpx">
                    <view style="text-align: center;margin-bottom: 20rpx"><text style="font-weight: bold">帮你找到家的感觉活动规则</text></view>
                    <view><text>一、活动主题：帮你找到家的感觉</text></view>
                    <view><text>二、活动参与资格：面向安徽合肥全市，凡通过房满租签约房源的用户</text></view>
                    <view><text>三、活动参与方式：符合活动参与资格的客户，需通过房满租微信小程序-广告位入口、弹屏、小程序、业主广告位、房源详情页、首页或者其他入口进入相应的活动页面。</text></view>
                    <view><text>四、活动规则：</text></view>
                    <view><text>（一）针对签约新房项目客户</text></view>
                    <view><text>1、活动期间内，通过房满租（安徽探索星空科技）有限公司成功签约出租房屋，可享受租房首月租金抵扣优惠；</text></view>
                    <view><text>2、出租房屋与房东房屋签约时间均需在活动期间（2022年03月15日至2023年03月15日）；</text></view>
                    <view><text>4、用户本人或其直系亲属（父母、配偶、子女、微信好友）符合前述活动规则在房满租（安徽探索星空科技）有限公司签约时均可享受本活动租房优惠；</text></view>
                    <view><text>5、成功邀请成功10位新用户获得的上述选房大礼包的价值，以房满租（安徽探索星空科技）有限公司确认和发放为准；</text></view>
                    <view><text>6、若在活动截止结算时产生退单或解约行为，取消活动参与资格并应退回新房大礼包。</text></view>
                    <view><text>7、以上活动适用于房满租（安徽探索星空科技）有限公司。</text></view>
                    <view><text>（二）活动发放：</text></view>
                    <view><text>1、客户奖品由客服在7天内联系客户进行确认；</text></view>
                    <view><text>2、房满租客户在邀请用户成功后，在“房满租微信小程序—我的卡券”查看优惠券并进行使用；</text></view>
                    <view><text>3、新房签约客户在房满租成交后，在“房满租微信小程序—我的卡券”查看优惠券并进行使用；</text></view>
                    <view><text>五、活动说明：</text></view>
                    <view><text>（一）本次活动不可兑换等值现金；</text></view>
                    <view><text>（二）符合活动参与资格的客户（下称“客户”）一旦选择参加本活动，即视为同意接受本活动涉及到的所有规则，任何对活动规则或者其他相应规则有异议的，视为放弃参加活动，否则房满租（安徽探索星空科技）有限公司有权取消其参与资格。</text></view>
                    <view><text>（三）活动期间，如客户违反如下任一条款，房满租（安徽探索星空科技）公司有权立即终止客户的活动参与资格，并采取包括但不限于暂停或查封客户在房满租的帐号、作废优惠券等必要措施维护自身合法权益，同时有权采取诉讼手段，追究相关法律责任：</text></view>
                    <view><text>1、客户在参与活动过程中涉嫌违反国家法律、行政法规、部门规章、地方性法规等规范性文件；</text></view>
                    <view><text>2、客户以任何方式、以任何语言文字对本次活动的资料全部或局部复制、转载、引用和链接，用以在其他任何与房满租（安徽探索星空科技）有限公司构成竞争关系的第三方竞品网站发布活动奖品信息；</text></view>
                    <view><text>3、客户以任何方式恶意获取、盗用或未经房满租（安徽探索星空科技）有限公司书面许可向第三方转让活动奖品；</text></view>
                    <view><text>4、违反本活动规则；</text></view>
                    <view><text>5、其他可能损害房满租（安徽探索星空科技）有限公司合法权益的行为。</text></view>
                    <view><text>（一）如出现不可抗力或情势变更的情况（包括但不限于重大灾害、政府行为，司法行政机关的命令）、房满租（安徽探索星空科技）有限公司遭受恶意攻击、严重系统故障等情况，导致本活动出现问题或无法进行的，房满租（安徽探索星空科技）有限公司有权终止本协议，并无须承担任何责任或进行补偿；</text></view>
                    <view><text>（二）房满租（安徽探索星空科技）有限公司可根据活动举办的实际情况，在法律允许的范围内，对本活动规则进行变动或调整，相关变动或调整将公布在活动规则相应页面。</text></view>
                    <view><text>六、活动联系客服邮箱及电话</text></view>
                    <view><text>客服邮箱：526565@qq.com</text></view>
                    <view><text>客服电话：4008888888（周一至周日 9:00-20:00，法定节假日除外）</text></view>
                </view>
            </view>
        </u-popup>

        <view class="coupon" :style="{top: couponTop[index]}" v-for="(item,index) in coupons" @click="takeCoupon(item.id)">
            <text>{{item.title}}</text>
            <text>{{item.describe}}</text>
        </view>


        <view class="progress">
            <text>我的人气值：</text><text>{{progress * 10}} / 100</text>
            <u-gap height="80rpx"></u-gap>
            <u-line-progress :percentage="progress * 10" activeColor="#FF7F00" :showText="false" height="20rpx"></u-line-progress>
            <view class="progress-point" :style="{left: (index + 1) * 16 + 4 + `vw`}" v-for="(item,index) in 5"></view>
        </view>

        <view class="share">
            <u-button openType="share" type="warning" text="立即分享" shape="circle" throttleTime="1000"></u-button>
        </view>

        <view class="qrcode">
            <text>我的编码：{{invite_code}}</text>
            <view>
                <u-image :showLoading="true" :src="qrsrc" width="400rpx" height="400rpx"></u-image>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        name: "invite",
        data(){
            return{
                rule: false,
                couponTop:[
                    '970rpx',
                    '1145rpx',
                    '1320rpx',
                    '1495rpx',
                ],
                qrsrc:'https://res.wx.qq.com/wxdoc/dist/assets/img/biz_qrcode.581c59c2.jpg',
                coupons:[],
                progress: 0,
                invite_code:'',
            };
        },
        onLoad(){
            if (!uni.getStorageSync('u_id')){
                uni.navigateTo({url:'/pages/user/my/login'});
            }
        },
        onShow(){
            this.getInviteCount();
            this.getCouponList();
            this.getInviteCode();
        },
        methods:{
            open() {
                this.rule = true
            },
            close() {
                this.rule = false
            },
            getInviteCount(){
                uni.showLoading({title: '正在加载'});
                uni.$u.http.get('/api.php/UserClinet/get_user_sharer_num'
                    + uni.$u.queryParams({u_id:uni.getStorageSync('u_id')})).then(res => {
                    uni.hideLoading();
                    this.progress = res.num;
                });
            },
            getCouponList(){
                uni.showLoading({title: '正在加载'});
                uni.$u.http.get('/api.php/UserClinet/get_coupon'
                    + uni.$u.queryParams({u_id:uni.getStorageSync('u_id')})).then(res => {
                    uni.hideLoading();
                    this.coupons = res;
                });
            },
            takeCoupon(c_id){
                if (this.progress < 10){
                    uni.showToast({
                        title: '未达到领取条件', //提示文字
                        duration: 1500, //显示时长
                        icon: "error", //图标，支持"success"、"loading"
                    });
                    return;
                }
                uni.showLoading({title: '正在请求'});
                uni.$u.http.get('/api.php/UserClinet/user_receive_coupon'
                    + uni.$u.queryParams({u_id:uni.getStorageSync('u_id'),c_id:c_id})).then(res => {
                    uni.hideLoading();
                    uni.showToast({
                        title: '领取成功', //提示文字
                        duration: 1500, //显示时长
                        icon: "success", //图标，支持"success"、"loading"
                    });
                });
            },
            getInviteCode(){
                let  that = this;
                uni.showLoading({title: '正在请求'});
                uni.$u.http.get('/api.php/UserClinet/share_do' + uni.$u.queryParams({u_id: uni.getStorageSync('u_id')})).then(res => {
                    uni.hideLoading();
                     this.invite_code = res.my_code;

                    // get QRCode
                    uni.showLoading({title: '正在请求'});
                    uni.request({
                        url: `https://sy-k.cn/api.php/Login/create_qrcode`,
                        method: "POST",
                        data: {
                            u_id: uni.getStorageSync('u_id'),
                            width: 220,
                            page: 'pages/user/active/help',
                            scene: "invete_code=" + this.invite_code,
                            check_path: true,
                            env_version: "release"
                        },
                        responseType: 'arraybuffer',
                        success: function(res) {
                            uni.hideLoading();
                            let src = uni.arrayBufferToBase64(res.data);
                            that.qrsrc = 'data:image/png;base64,' + src;
                        }
                    })
                });
            },
        },

        onShareAppMessage(){
            return {
                title: '自定义转发标题',
                path: '/pages/user/active/help' + uni.$u.queryParams({invite_code: this.invite_code}),
            }
        }
    }
</script>

<style lang="scss" scoped>
    .page {
        width: 100%;
        height: 207vh;
        background-image: url("https://sy-k.cn/static/admin/images/ax3.png");
        background-size: contain;
        background-repeat: no-repeat;
        position: relative;
    }
    .rule{
        height: 60rpx;
        background-color: #FF7F00;
        position: absolute;
        right:0;
        top:471rpx;
        border-radius: 35rpx 0 0 35rpx;

        text{
            font-size: 28rpx;
            text-align:right;
            line-height: 58rpx;
            padding-left:10rpx;
        }
    }
    .coupon{
        width: 100vw;
        height: 155rpx;
        @include flex(column);
        justify-content: flex-start;
        padding: 1rpx 120rpx;
        position: absolute;

        text{
            margin-top: 20rpx;
        }
        text:first-child{
            font-weight: bold;
        }
        text:last-child{
            color: #808080;
        }
    }

    .progress{
        width: 80vw;
        padding-left: 10vw;
        position: absolute;
        top: 1720rpx;
    }
    .progress-point{
        width: 8vw;
        height: 8vw;
        background-image: url("https://sy-k.cn/static/admin/images/ax1.png");
        background-size: contain;
        background-repeat: no-repeat;
        position: absolute;
        top:100rpx;
    }
    .share{
        width: 80vw;
        height: 10vw;
        margin-left: 10vw;
        position: absolute;
        top: 1980rpx;
        font-weight: bold;
    }
    .qrcode{
        width: 80vw;
        margin-left: 10vw;
        @include flex(column);
        align-items: center;
        justify-content: space-evenly;
        height: 566rpx;
        position: absolute;
        top: 2222rpx;
    }
</style>